---
categories: [Widgets]
layout: page
title: Code
resource: true
url-js-extra: '//rawgit.com/tcollard/google-code-prettify/v1.0.4/bin/prettify.min.js'
---
      <h2>Inline</h2>
      <p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>
      <h2>User input</h2>
      <p>To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
      To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd></p>
      <h2>Basic block</h2>
      <pre>&lt;p class="my-class"&gt;Sample text here...&lt;/p&gt;</pre>
      <h2>Variables</h2>
      <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
      <h2>Sample output</h2>
      <samp>This text is meant to be treated as sample output from a computer program.</samp>
      <h2>Syntax highlighting with google-code-prettify</h2>
      <h3>Basic block</h3>
      <pre class="prettyprint">&lt;p class="my-class"&gt;Sample text here...&lt;/p&gt;</pre>
      <h3>Larger block with line numbers</h3>
      <pre class="prettyprint linenums lang-html">
&lt;!doctype html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;header&gt;&lt;/header&gt;
  &lt;div role=&quot;main&quot;&gt;&lt;/div&gt;
  &lt;footer&gt;&lt;/footer&gt;
  &lt;script src=&quot;js/script.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
      <script>
        $(document).ready(function(){
          prettyPrint();
        });
      </script>